<template>
	<view class="content">
		<!-- 顶部tabs -->
		<view class="top-tabs-list-box">
			<u-tabs
				class="u-tabs"
				:list="typeList"
				active-color="#181818"
				height="50"
				inactive-color="#868686"
				:is-scroll="true"
				:current="current"
				@change="typeChange"
			>
			</u-tabs>
		</view>
		<!-- 列表 -->
		<block v-for="(item, index) in list" :key="item.order_sn">
			<view class="tobepaid-plate-box" @click="toDetail(item.order_id)">
				<view class="top-shop-box">
					<view class="left-shop-box flex-c-c">
						<!-- <image src="../../pageMember/static/icon10.png" mode="widthFix"></image> -->
						<text class="ellipsis">订单号: {{ item.order_sn }}</text>
						<!-- <image src="/static/cart_icon/icon1.png" mode="heightFix"></image> -->
					</view>
					<view class="right-status-box flex-c">
						<text>{{ item.status | getStatus(orderStatus, item.refund_status) }}</text>
					</view>
				</view>
				<view class="goods-item-box">
					<view class="left-img-box">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="right-info-box">
						<view class="top-box">
							<text class="ellipsis">{{ item.store_name }}</text>
							<text>x{{ item.total_num }}</text>
						</view>
						<view class="center-box">
							<text>{{ item.product_sku }}</text>
						</view>
						<view class="bottom-box">
							<text>{{ item.pay_integral }}</text>积分
						</view>
					</view>
				</view>
				<view class="price-box">
					<text>共{{ item.total_num }}件商品</text>
					<text>
						实付款{{ item.pay_integral }}积分
						<block v-if="item.pay_postage">+￥{{ item.pay_postage }}</block>
					</text>
				</view>
				<view class="bottom-but-box">
					<view @click.stop="toPend(item, 1)"
					v-if="
					item.paid == 1
					&&
					(item.status == 0 || (item.status == 6 && item.refund_type == 1))"
					>
						<text>申请退款</text>
					</view>
					<view @click.stop="toPend(item, 2)"
					v-if="item.status == 1 || item.status == 2 || (item.status == 6 && item.refund_type == 2)"
					>
						<text>申请售后</text>
					</view>
					<view @click.stop="configFun(item.order_id)" class="cancel-box"
					 v-if="item.status == 1 || (item.status == 6 && item.delivery_time && !item.confirm_time)"
					 >
						<text>确认收货</text>
					</view>
					<view @click.stop="evaluateFun(item.order_id)" v-if="item.status == 2 || (item.status == 6 && item.confirm_time)">
						<text>立即评价</text>
					</view>
				<!-- 	<view @click.stop="cancelFun()" class="buy-box" v-if="item.paid == 0">
						<text>取消订单</text>
					</view> -->
				<!-- 	<view class="buy-box" v-if="item.paid == 0">
						<text>立即支付</text>
					</view> -->
				</view>
			</view>
		</block>
		<!-- 空状态 -->
		<empty v-if="!list.length" imgUrl="/pageMember/static/icon13.png" imgWidth="230" imgHeight="241" desc="暂无订单" top="100" bottom="100"></empty>
	</view>
</template>

<script>
	import empty from '@/components/custom/emtyp.vue'
	export default {
		components: {
			empty,
		},
		data(){
			return {
				current: 0, // 选项卡默认索引
				typeList: [
					{
						name: '全部',
						id: '',
					},
					{
						name: '待发货',
						id: '2',
					},
					{
						name: '待收货',
						id: '3',
					},
					{
						name: '已完成',
						id: '4',
					},
					{
						name: '退款/售后',
						id: '5',
					},
				],
				orderStatus: ['待发货', '待收货', '待评价', '已完成', '退款中', '退款/售后成功', '退款/售后失败'],
				list: [], // 订单列表
			}
		},
		onLoad: function (option) {
			this.getList()
		},
		computed: {
			status: function () {
				const { typeList, current } = this
				return typeList[current].id
			},
		},
		filters: {
			getStatus: function (status, list,refund_status) {
				if (status == 5) {
					return refund_status == 3? '售后成功' : '售后审核通过'
				}else{
					return list[status];
				}
			}
		},
		methods:{
			// 前往订单详情
			toDetail: function (order_id) {
				console.log(order_id)
				uni.navigateTo({
					url: `/pageMember/orderList/hallOrderDetail?order_id=${order_id}`,
					events: {
						isChange: isUp => {
							isUp && this.getList()
						}
					},
					success: res => {
						res.eventChannel.emit('isChange')
					}
				})
			},
			// 获取积分订单列表
			getList: async function () {
				uni.showLoading({ title: '加载中' })
				const { status } = this
				const { code, data, message } = await this.$u.api.getHallOrderList({ status })
				if (code == '1') {
					console.log('积分订单', data)
					this.list = data
				} else {
					this.$showToast(message || '获取订单失败')
				}
			},
			// 选项卡切换
			typeChange: function (index) {
				this.current = index
				this.getList()
			},
			// 前往退款页面
			toPend: function (item, refund_type, order_type = 2) {
				const param = { item, refund_type, order_type }
				uni.navigateTo({
					// url: `/pageMember/orderDetails/returnGoods?order_id=${order_id}&refund_type=${refund_type}&order_type=${order_type}`,
					url: `/pageMember/orderDetails/returnGoods`,
					events: {
						changeStatus: isUp => {
							isUp && this.getList()
						}
					},
					success: res => {
						res.eventChannel.emit('changeStatus', param)
					}
				})
			},
			// 确认收货
			configFun: function (order_id) {
				uni.showModal({
					title: '您确定要收货么?',
					success: async res => {
						if (res.confirm) {
							console.log(order_id)
							uni.showLoading({ title: '加载中' })
							const { code, data, message } = await this.$u.api.setHoConfirmOrder({ order_id })
							if (code == '1') {
								console.log('确认收货', data)
								uni.showModal({
									title: '收货成功',
									showCancel: false
								})
								this.getList()
							} else {
								this.$showToast(message || '收货失败')
							}
						}
					}
				})
			},
			// 立即评价
			evaluateFun: function (order_id) {
				uni.navigateTo({
					url: `/pageMember/orderDetails/hallOrderEvaluate?order_id=${order_id}`,
					events: {
						changeStatus: isUp => {
							isUp && this.getList()
						}
					},
					success: res => {
						res.eventChannel.emit('changeStatus')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: #F5F5F5;
		.top-tabs-list-box{
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
		}
	}
	.tobepaid-plate-box{
		width: 100%;
		padding: 50rpx 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		.top-shop-box{
			padding-bottom: 20rpx;
			display: flex;
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
			.left-shop-box{
				flex: 0.7;
				justify-content: flex-start;
				text{max-width: 460rpx;padding: 0 10rpx;}
				image{width: 35rpx; height: 35rpx;}
				image:last-child{width: 25rpx; height: 25rpx;}
			}
			.right-status-box{
				flex: 0.3;
				justify-content: flex-end;
			}
		}
		.goods-item-box{
			display: flex;
			margin-bottom: 30rpx;
			.left-img-box{
				flex: 0.2;
				line-height: 0;
				image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
			}
			.right-info-box{
				min-width: 0;
				flex: 0.8;
				padding-left: 20rpx;
				.top-box{
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					display: flex;
					padding-bottom: 20rpx;
					text:first-child{flex: 0.8;}
					text:last-child{flex: 0.2;font-size: 28rpx;font-weight: 400;color: #999999;text-align: right;}
				}
				.center-box{
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					padding-bottom: 70rpx;
				}
				.bottom-box{
					font-size: 22rpx;
					font-weight: bold;
					color: #333333;
					text{font-size: 30rpx;}
				}
			}
		}
		.price-box{
			text-align: right;
			font-size: 26rpx;
			text:first-child{font-weight: 400;color: #999999;padding-right: 10rpx;}
			text:last-child{font-weight: bold;color: #333333;}
		}
		.bottom-but-box{
			padding-top: 30rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: flex-end;
			view{
				padding: 10rpx 30rpx;
				font-weight: 400;
				color: #000000;
				background: rgba(48, 48, 48, 0);
				border: 1rpx solid #808080;
				border-radius: 50rpx;
				margin-right: 20rpx;
			}
			.cancel-box{
				background: #000;
				color: #fff;
			}
		}
	}
</style>